<template>
  <view class="before-result-page-mbti">
    <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo"/>
    <view class="fixed-right-tip" @click="backToSclList" v-if="showMoreSclBlock">
      更多测评 
      <u-icon color="#7E3508" size="24rpx" name="arrow-right"></u-icon>
    </view>
    
    <template v-for="(img,index) in staticImgs.imgArr" >
      <view class="img-wrapper" :class="{'img-wrapper-1':index===0}">
        <image class="img" :src="img" mode="widthFix"></image>  
        <view class="box-wrapper-1-pos" v-if="index === 0">
        
          <view class="tit-img-box-abs" :style="{'top':topH+'rpx'}">
            <view class="tit-img-box">
              <!-- <image class="img" :src="staticImgs.titImg" mode="widthFix"></image> -->
              {{sclInfo.sclName}}
            </view>
          </view>

          <view class="info-box-list" v-if="showGoodsList">
            <view class="info-box" @click="actType='groupA'" :class="{'info-box-act': actType === 'groupA'}"
              :style="{'background-image':`url(${ actType === 'groupA' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
            >
              <view class="more-intro-abs">
                80%的用户选择
              </view>
              <view class="name">基础测试报告</view>
              <view class="price-row">
                <view class="current-price">
                  <view class="unit">¥</view>
                  <view class="num">{{ hasTriggeredSpecificCondition ? goodsGroup[0].preferentialPrice : goodsGroup[0].currentPrice}}</view>
                </view>
                <view class="market-price">
                  <view class="unit">¥</view>
                  <view class="num">{{goodsGroup[0].marketPrice}}</view>
                </view>
              </view>
              <view class="intro-row">
                {{goodsGroup[0].groupDetail}}
              </view>
            </view>
            
            <view class="info-box" @click="actType='groupB'" :class="{'info-box-act': actType === 'groupB'}"
            :style="{'background-image':`url(${ actType === 'groupB' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
            >
              
              <view class="name">完整测试报告</view>
              <view class="price-row">
                <view class="current-price">
                  <view class="unit">¥</view>
                  <view class="num">{{hasTriggeredSpecificCondition ? goodsGroup[1].preferentialPrice : goodsGroup[1].currentPrice}}</view>
                </view>
                <view class="market-price">
                  <view class="unit">¥</view>
                  <view class="num">{{goodsGroup[1].marketPrice}}</view>
                </view>
              </view>
              <view class="intro-row">
                {{goodsGroup[1].groupDetail}}
              </view>
            </view>
            
          </view>
          
          <view class="first-small-btn" @click="confirmHandle"
            :style="{'background-image':`url(${staticImgs.mainBtnBg})`}"
           >
            <view>解锁你的专属报告</view>
          </view>
          
          <view class="back-to-home-tip-box" @click="backToSclList" >
            放弃获得本次报告，前往大厅发现更多
            <view class="arrow-icon">
              <image  class="img-icon" :src="staticImgs.arrowRight" mode=""></image>
            </view>
          </view>
          
        </view>
        
        <view class="more-btn-wrapper" v-if="moreBtnObj[index]" :style="[moreBtnObj[index].sty]">
          <view class="more-btn-box" @click="confirmHandle">
            <image class="img" :src="staticImgs.smallBtnImg" mode="widthFix"></image>
          </view>
        </view>
      
        

        
      </view>
    </template>
    
    
    
    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <view
         class="before-exit-btn-wrapper"
         :style="{'background-image':`url(${staticImgs.smallBtnImg})`}"
         @click="confirmHandle"  
      >
      </view>
      
    </view>
    
    <u-popup :show="showPopup" mode="bottom"  @close="closeHandle" bgColor="transparent" :overlayStyle="{background: 'rgba(0, 0, 0, 0.8)'}"	>
      <view class="popup-wrapper">
        <view class="info-box-list" v-if="showGoodsList">
          <view class="info-box" @click="actType='groupA'" :class="{'info-box-act': actType === 'groupA'}"
            :style="{'background-image':`url(${ actType === 'groupA' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
          >
            <view class="more-intro-abs">
              80%的用户选择
            </view>
            <view class="name">基础测试报告</view>
            <view class="price-row">
              <view class="current-price">
                <view class="unit">¥</view>
                <view class="num">{{ hasTriggeredSpecificCondition ? goodsGroup[0].preferentialPrice : goodsGroup[0].currentPrice}}</view>
              </view>
              <view class="market-price">
                <view class="unit">¥</view>
                <view class="num">{{goodsGroup[0].marketPrice}}</view>
              </view>
            </view>
            <view class="intro-row">
              {{goodsGroup[0].groupDetail}}
            </view>
          </view>
          
          <view class="info-box" @click="actType='groupB'" :class="{'info-box-act': actType === 'groupB'}"
          :style="{'background-image':`url(${ actType === 'groupB' ? staticImgs.boxActBg : staticImgs.boxDefBg })`}"
          >
            
            <view class="name">完整测试报告</view>
            <view class="price-row">
              <view class="current-price">
                <view class="unit">¥</view>
                <view class="num">{{hasTriggeredSpecificCondition ? goodsGroup[1].preferentialPrice : goodsGroup[1].currentPrice}}</view>
              </view>
              <view class="market-price">
                <view class="unit">¥</view>
                <view class="num">{{goodsGroup[1].marketPrice}}</view>
              </view>
            </view>
            <view class="intro-row">
              {{goodsGroup[1].groupDetail}}
            </view>
          </view>
          
        </view>
        
        
        <view class="pay-btn" @click="payHandle"
        :style="{'background-image':`url(${staticImgs.wxPayBtnBg})`}"
        >
          <u-icon name="weixin-fill" color="#fff" size="44rpx"></u-icon>
        <text class="text">立即支付</text>
        </view>
        
      </view>
    </u-popup>
    
    
    <BeforeExitPayModal :price-before="beforePrice" :price-now="nowPrice" @close="beforeExitPayClose" @confirm="beforeExitPayConfirm" :visible="beforeExitPayModalVisible"/>
    
    <BeforeExitPayModal2 type="CRYL" @close="beforeExitPayClose_2" @confirm="beforeExitPayConfirm_2" :visible="modalVisible"/>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import BeforeExitPayModal from '@/subcontractorD/components/BeforeExitPayModal_1.vue'
  import BeforeExitPayModal2 from '@/subcontractorD/components/BeforeExitPayModal_2.vue'
  import {removeEmptyProperty} from '@/common/utils/util.js'
  
  import {
    orderPay
  } from '@/common/api/scl_api.js'
  import { debounce } from 'lodash'
  let countTimer;
  var app = getApp();
  export default{
    components:{
      navigationBar,
      BeforeExitPayModal,
      BeforeExitPayModal2
    },
    props:{
      scrollTopNum:{
        type:Number,
        default:0
      },
      goodsGroup:{
        type:Array,
        default:[]
      },
      sclId:{
        type:String,
        default:'',
      },
      sclPayBack:{
        type:Boolean,
        default:true
      },
      sclInfo:{
        type: Object,
        default: {},
      },

    },
    data(){
      return{
        navigationBarDataInfo:{
        	"bg_color": "transparent",
        	"color": "#AB2B98",
        	"flag": 1,
        	"name": "",
          "hasEntity":false,
        },
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
        showMoreSclBlock:false,
        windowHeight:99999,
        beforeExitPayModalVisible:false,
        modalVisible:false,
        staticImgs: {
          imgArr: [
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/top-bg.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-2.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-3.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-4.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/img-5.jpg'
          ],
          arrowRight: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/r-arrow.png',
          tipImg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/tip-img-2.png',
          
          mainBtnBg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/main-btn.png',
          smallBtnImg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/small-btn-bg.png',
          titImg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/tit.png',
          
          boxActBg:this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/box-act.png',
          boxDefBg:this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/box-def.png',
          
          wxPayBtnBg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/wxpay-btn-bg.png',
          tipBg: this.imgBaseURL + '/scl/scl-before-result-page/love-cryl/tip-bg.png',
        },
        moreBtnObj:{
          '1':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          },
          '3':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          },
          '4':{
            sty:{
              bottom:'50%',
              left:'0',
              right:'0'
            }
          }
        },

        actType:'groupA',
        showPopup:false,
        loading:false,
        showFixedBtn:false,
        hasTriggeredSpecificCondition:false,
        hasBackLock:true,
        topH:0,
      }
    },
    computed:{
      fixeBtnType(){
        ///1:默认样式，2：一元带icon，3:一元不带icon，4:其他优惠券
        if(this.sclInfo && this.sclInfo.discountType === 4){
          return 3
        }else if( this.sclInfo && this.sclInfo.id){
          return 4
        }else {
          return 1
        }
      },
      showGoodsList (){
        return this.goodsGroup.length>0
      },
      nowPrice(){
        return this.goodsGroup && this.goodsGroup[this.actType === 'groupA'?0:1] && this.goodsGroup[this.actType === 'groupA'?0:1].preferentialPrice
      },
      beforePrice(){
        return this.goodsGroup && this.goodsGroup[this.actType === 'groupA'?0:1] && this.goodsGroup[this.actType === 'groupA'?0:1].currentPrice
      }
    },
    watch:{
      scrollTopNum(val){
        this.showFixedBtn = val>this.windowHeight
      }
    },
    mounted() {
      const that = this
      uni.getSystemInfo({
        success(res) {
          that.windowHeight = res.windowHeight/res.devicePixelRatio
        }
      })
      this.topH = app.globalData.topHeight * 2 - 8
      
    },
    
    methods:{
      backHandle(){
        if(this.hasBackLock){
          this.hasBackLock = false
          if(this.sclPayBack){
            this.beforeExitPayModalVisible = true   
          }else{
           this.modalVisible = true 
          }
        }else{
          uni.reLaunch({
            url:'/pages/sclList/sclList'
          })
        }
      },
      backToSclList(){
        uni.reLaunch({
          url:'/pages/sclList/sclList'
        })
      },
      beforeExitPayClose(){
        console.log('===beforeExitPayClose====close')
        this.beforeExitPayModalVisible = false
        this.modalVisible = true
      },
      beforeExitPayConfirm(){
        console.log('===beforeExitPayConfirm====close')
        this.beforeExitPayModalVisible = false
        this.payHandle('Y')
      },
      beforeExitPayClose_2(){
        this.modalVisible = false
      },
      beforeExitPayConfirm_2(){
        this.modalVisible = false
        uni.reLaunch({
          url: '/pages/sclList/sclList?userType=sclList'
        })
        
      },
      payHandle:debounce(async function(isDisPay) {
        if(this.loading) return
        uni.showLoading({
          title:"请求支付中..."
        })
        
        console.log(isDisPay,'=============isDisPay')
              
        this.loading = true
        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          sclPayGroup: this.actType,
          orderType: '7',
          isAdditional:'N',
          discountUid:this.$store.state.user.actCouponId,
          adClickId: uni.getStorageSync('adClickId'),
          isDisPay:(isDisPay == 'Y' || this.hasTriggeredSpecificCondition) ? 'Y' : 'N'
        })
        
        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res=>{
          
          if (res.data.code == 200) {
          	uni.requestPayment({
          		provider: 'wxpay',
          		service: 5,
          		orderInfo: res.data.data.wr,
          		timeStamp: res.data.data.wr.timeStamp,
          		nonceStr: res.data.data.wr.nonceStr,
          		package: res.data.data.wr.packageValue,
          		signType: res.data.data.wr.signType,
          		paySign: res.data.data.wr.paySign,
          		success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
          		},
          		fail: function(err) {
          			that.$showToast('支付取消');
                uni.showLoading()
                that.showMoreSclBlock = true
                if(isDisPay != 'Y' && that.sclPayBack){
                  
                  that.beforeExitPayModalVisible = true
                  that.hasTriggeredSpecificCondition = true
                  
                  setTimeout(()=>{
                   that.hasTriggeredSpecificCondition = false 
                  },60*1000)
                  
                }else if(that.sclPayBack){
                  that.modalVisible = true
                }
                
                setTimeout(()=>{
                  uni.hideLoading()
                  that.showPopup = false
                  that.loading = false
                },300)
          		}
          	});
          } else {
          	that.$showToast(res.data.message);
            uni.hideLoading()
          }
        }).catch(e=>{
          setTimeout(()=>{
            this.showPopup = false
            this.loading = false
          },300)
        })

      },500),
      confirmHandle(){
        this.useSubscription(this.preConfirmHandle)
      },
      preConfirmHandle(){        
        const that=this;
      
        const query = uni.createSelectorQuery().in(that);
        query.select('.first-small-btn').boundingClientRect(data => {
        
          if(that.scrollTopNum > data.top){
            that.showPopup = true
          }else{
            that.payHandle()
          }
    
        }).exec();
    
      },
      closeHandle(){
        this.showPopup = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  

  
  .back-to-home-tip-box{
    // margin-top: 26rpx;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 28rpx;
    color: rgba(152, 75, 41, 1);
    line-height: 40rpx;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    
    .arrow-icon{
      width: 32rpx;
      height: 32rpx;
      .img-icon{
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .before-result-page-mbti{
    padding-bottom: 10vh;
    background-color: rgba(255, 238, 240, 1);
    
    position: relative;
    
    .fixed-right-tip{
      width: 182rpx;
      height: 50rpx;
      column-gap: 14rpx;

      background: linear-gradient( 180deg, #FDE591 0%, #FFCE66 100%);
      border-radius: 32rpx 0rpx 0rpx 32rpx;
      
      position: fixed;
      right: 0;
      top: 280rpx;
      z-index: 24;
      
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20rpx;
      
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #7E3508;
      // line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }
    
    
    .danmu-wrapper-pos{
      height: 450rpx;
      width: 750rpx;
      // background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      
      z-index: 1;
      
      .danmu-wrapper{
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
    
    .img-wrapper-1{
      height: 1280rpx;
    }
    .img-wrapper{
     position: relative; 
     
     .img{
       width: 750rpx;
       // margin-bottom: 10px;
     }
     
     .box-wrapper-1-pos{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        
        .tit-img-box-abs {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .tit-img-box {
          width: 522rpx;
          height: 50rpx;
        
          .img {
            width: 100%;
          }
          
          
          height: 50rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 46rpx;
          color: #984B29;
          line-height: 52rpx;
          text-stroke: 3px #FFFFFF;
          text-align: center;
          width: 660rpx;
          font-style: normal;
          word-break: keep-all;
          text-shadow: -4rpx -4rpx 10rpx #fff;
        }
        
     }
     // .box-wrapper-1-pos -- end
     
     
     .small-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       margin-top: 40rpx;
       .img{
         width: 100%;
         height: 100%;
       }
     }
     
     .before-exit-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       position: relative;
       
       background-size: 100%;
       background-repeat: no-repeat;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       

       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         // margin-left: 12rpx;
       }
       
       margin-top: 40rpx;
     }
     
    }
    
    // .img-wrapper -- end
    
    .more-btn-wrapper{
      position: absolute;
    }
    
    .more-btn-box {
      width: 400rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
    
      margin-top: 40rpx;
    
      .img {
        width: 100%;
        height: 100%;
      }
    }
    
    .info-box-list{
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 24rpx;
      
      .info-box{
        width: 334rpx;
        height: 280rpx;
        border-radius: 14rpx;
        // border: 1rpx solid #D1D0D0;
        box-sizing: border-box;
        
        position: relative;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        background-repeat: no-repeat;
        // background-size: 100%;
            background-size: contain;

                
        .more-intro-abs{
          position: absolute;
          
          top: -32rpx;
          left: 0rpx;
          
          width: 232rpx;
          height: 50rpx;
          background: linear-gradient( 180deg, rgba(248, 157, 255, 1) 0%, rgba(241, 85, 235, 1) 100%);
          border-radius: 0rpx 14rpx 0rpx 14rpx;
          
          line-height: 50rpx;
          text-align: center;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #fff;
          font-style: normal;
        }
        
        .name{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }
        
        .price-row{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 6rpx;
          margin-bottom: 6rpx;
          
          column-gap: 12rpx;
          
          .current-price{
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            .unit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #FF4A4A;
              line-height: 37rpx;
              text-align: left;
              font-style: normal;
            }
            .num{
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 60rpx;
              color: #FF4A4A;
              line-height: 74rpx;
              text-align: left;
              font-style: normal;
              
            }
          }
          
          .market-price{
            display: flex;
            align-items: center;
            column-gap: 4rpx;
            position: relative;
            
            
            ::before{
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 68rpx;
              height: 1rpx;
              background: #888;
              transform: translate(-50%);
            }
            
    
            
            
            .unit{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
            .num{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 23rpx;
              color: #666666;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        
        
        
        .intro-row{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 21rpx;
          color: #666666;
          line-height: 29rpx;
          
          font-style: normal;
          
          width: 280rpx;
          height: 100rpx;
          background: linear-gradient( 177deg, #FFFFFF 0%, #FFE1E8 100%);
          border-radius: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          
          
          text-align: center;
          box-sizing: border-box;
          padding: 0 18rpx;
          
          
        }
        
      }
     
     
     .info-box-act{
       // border: 3rpx solid #728AFF;
       .name{
        color:  rgba(142, 64, 36, 1); 
       }
     }
      
    }
    
    // .info-box-list -- end
    
    
    
    .btn-wrapper-pos{
     position: fixed; 
     bottom: 7vh;
     
     left: 0;
     right: 0;
     
     display: flex;
     justify-content: center;
     
     .before-exit-btn-wrapper{
       width: 400rpx;
       height: 100rpx;
       
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       
       background-repeat: no-repeat;
       background-size: 100%;
       
       .price-box{
         display: flex;
         align-items: flex-end;
         
         .unit{
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #FFFFFF;
           line-height: 37rpx;
           
           font-style: normal;
               margin-bottom: 4rpx;
               margin-right: 4rpx;
         }
         
         .num{
           font-family: HelveticaNeue, HelveticaNeue;
           font-weight: 500;
           font-size: 50rpx;
           color: #FFFFFF;
           line-height: 61rpx;
           
           font-style: normal;
         }
       }
       
       .btn-text{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 30rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: center;
         font-style: normal;
         margin-left: 12rpx;
       }
       
       // margin-top: 40rpx;
       
     }
     
     
     .btn-wrapper{
       width: 600rpx;
       height: 90rpx;
       .btn-img{
         width: 100%;
         height: 100%;
       }
     }
    }
   
   
   .popup-wrapper{
     width: 750rpx;
     min-height: 502rpx;
     background: #FFFFFF;
     border-radius: 40rpx 40rpx 0rpx 0rpx;
     box-sizing: border-box;
     padding-top: 66rpx;
     padding-bottom: constant(safe-area-inset-bottom); 
     padding-bottom: env(safe-area-inset-bottom); 
     
     .pay-btn{
       width: 660rpx;
       height: 202rpx;
       border-radius: 45rpx;
       
       display: flex;
       justify-content: center;
       margin: auto;
       margin-top: 20rpx;
       
       // padding-top: 68rpx;
       
       background-repeat: no-repeat;
       background-size: contain;
       box-sizing: border-box;
       
           align-items: center;
           padding-bottom: 24rpx;
       
       
       
       .text{
         font-family: PingFang-SC, PingFang-SC;
         
         font-size: 32rpx;
         color: #FFFFFF;
         line-height: 42rpx;
         text-align: left;
         font-style: normal;
         margin-left: 10rpx;
       }
     }
   } 
  }
  
  
  
  @keyframes showDivAni{
  	0%{opacity:0;}
  	100%{opacity: 1;}	
  }
  
  
  .first-small-btn {
    margin-top: 30rpx;
  
    width: 660rpx;
    height: 190rpx;
    box-sizing: border-box;
    position: relative;
  
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
    display: flex;
    // align-items: center;
    padding-top: 64rpx;
    justify-content: center;
  
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
  
    font-style: normal;
    
  
    .unit {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      margin-top: 9rpx;
  
      margin-top: 4rpx;
      margin-right: 4rpx;
    }
  
    .price {
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-top: -4rpx;
    }
  
  
    .tip-box {
      position: absolute;
      right: 84rpx;
      top: 14rpx;
      // bottom: 86rpx;
  
      // width: 200rpx;
      
      padding: 4rpx 22rpx;
      height: 46rpx;
  
      background-repeat: no-repeat;
      background-size: 100% 100%;
      
  
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFDA;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
  
      box-sizing: border-box;
      // padding-top: 4rpx;
    }
    
    .tip-box-2{
      border-radius: 23rpx 23rpx 23rpx 0rpx;
      background: linear-gradient(180deg, rgba(248, 157, 255, 1) 0%, rgba(241, 85, 235, 1) 100%);
    }
  
  }

</style>